<template>
  <div :id="id" :style="{ width: width, height: height }"></div>
</template>
  
  <script>
export default {
  name: "pie2",
  props: {
    id: {
      type: String,
      default: "myChart"
    },
    width: {
      type: String,
      default: "1000px"
    },

    height: {
      type: String,
      default: "400px"
    },

    seriesData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    seriesData: {
      deep: true,
      handler(val) {
        this.drawLine(val);
      }
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawLine();
    });
  },

  methods: {
    drawLine(data) {
      let myChart = this.echarts.init(document.getElementById(this.$props.id));
      let optionPie2 = {
        title: {
          text: "数据源状态统计",
          left: "left"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "right",
          formatter: (name) => {
            let seriesData = data || [];
            let item = seriesData.find(item => item.name === name);
            return item? `${item.name}: ${item.value}` : name;
          }
        },
        color: ["#22D05E", "#F53F3F"],
        series: [
          {
            type: "pie",
            // radius: "60%",
            radius: ["40%", "60%"],
            center: ["35%", "60%"],
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
                // normal:{
                //   color:function(colors){
                //     var colorList = [
                //       "#fc8251",
                //       "#5470c6"
                //     ];
                //     return colorList[colors.dataIndex]
                //   }
                // }
              }
            }
          }
        ]
      };
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.setOption(optionPie2);
    }
  }
};
</script>
  